<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #f06060;
        }
        .wrap{
            width: 960px;
            margin: 0 auto;
            font-size: 14px;
            color: #fff;
        }
        .header{
            overflow: hidden;
            zoom: 1;
            line-height: 3em;
            font-size: 1.5em;
        }
        #limit_time{
            float: left;
        }
        #mark{
            float: right;
        }
        #main{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background: #ddd;
            padding: 10px;
            border-radius: 10px;
        }
        #inner{
            /*margin: 0 auto;*/
            list-style: none;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #inner li{
            float: left;
            border: 5px solid #ddd;
            border-radius: 10px;
            cursor: pointer;
            box-sizing: border-box;/*改变width的计算方式*/
        }
        #end{
            width: 100%;
            height: 100%;
            background: #ccc;
            text-align: center;
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            font-size: 2em;
        }
        #end span{
            font-size: 4em;
            color: #f10;
        }
        #end a{
            background: #1883ba;
            display: block;
            height: 3em;
            width:50%;
            margin: 6px auto;
            line-height: 3em;
            border-radius: 0.3em;
            border:1px solid #fff;
            color: #fff;
            text-decoration: none;
        }

    </style>
    <script type="text/javascript">
        window.onload = function () {
            var level = 1;
            var oMain = document.getElementById("main");
            var oLimitTime = document.getElementById("limit_time");
            var oMark = document.getElementById("mark");
            var oInner = document.getElementById("inner");
            var count = 0;
            var oEnd = document.getElementById("end");
            var oAgain = document.getElementById("again");
            var oEnd_mark = document.getElementById("end_mark");
            var oBgMusic = document.getElementById("BGmusic");
            var oMusic = document.getElementById("music");

            function nine(num) {
                return num<10?"0"+num:""+num;
            }

            function getTimer() {
                oBgMusic.innerHTML = '<embed src="audio/fzm.mp3" autostart="true" hidden="true" loop="3"></embed>';
                var nowTime = new Date();
                var endTime = new Date(nowTime.getTime());
                endTime.setTime(nowTime.getTime()+60*1000);
                var limitTime = endTime-nowTime;
                oLimitTime.innerHTML ='剩余时间：'+ nine(Math.floor(limitTime/1000/60))+':'+nine(Math.floor(limitTime%60));
                var timer = null;
                clearInterval(timer);
                timer = setInterval(function () {
                    nowTime = new Date();
                    limitTime = endTime-nowTime;
                    var cResult = Math.floor(limitTime/1000);
                    if(cResult==0 || level==10){
                        oEnd.style.display = "block";
                        if(cResult==0){
                            oBgMusic.innerHTML = '<embed src="audio/time_over.wav" autostart="true" hidden="true"></embed>';
                        }else{
                            oBgMusic.innerHTML = '<embed src="audio/win.mp3" autostart="true" hidden="true"></embed>'
                        }
                        clearInterval(timer);
                        oEnd_mark.innerHTML = '您的成绩为：<span>'+(count+Math.floor(cResult%60)*50)+'</span>分&nbsp;&nbsp;&nbsp;level:<span>'+level+'</span>';
                    }
                    oLimitTime.innerHTML ='剩余时间：'+ nine(Math.floor(limitTime/1000%3600/60))+':'+nine(Math.floor(limitTime/1000%60));
                },1000)

            }

            function getBFS(num) {
                return Math.round(num*100)+"%";
            }

            function getBGColor() {
                var aColor = ['#f9f','#ddd','#dad','#aaf'];
                return aColor[Math.floor(Math.random()*aColor.length)];
            }
            function gMain() {
                var arr = [];
                var fen = 1/(level+1);
                var aLength = Math.pow((level+1),2);
                arr.push('fzm.png');
                for(var j=0;j<aLength-1;j++){
                    arr.push('kzd.png');
                }
                arr.sort(function () {
                   return Math.random()-0.5;
                });
                for(var i=0;i<aLength;i++){
                    var oLi = document.createElement("li");
                    //如果fen为整数，会影响平均的效果
//                    oLi.style.width =getBFS(fen);
                    oLi.style.width =fen*100+"%";
                    oLi.style.height = fen*100+"%";
                    oLi.style.background = 'url("game_img/'+arr[i]+'") bottom center no-repeat';
                    oLi.style.backgroundSize = "100% 100%";
                    oLi.style.backgroundColor = getBGColor();
                    oInner.appendChild(oLi);
                }
                for(var i=0;i<oInner.children.length;i++){
                    oInner.children[i].onclick = function () {
                        var str = this.style.background;
                        if(str.indexOf('fzm.png')>-1){
                            count+=100;
                            oMusic.innerHTML = '<embed src="audio/maria.mp3" autostart="true" hidden="true"></embed>';
                            oMark.innerHTML = '成绩：'+count;
                            level++;
                            oInner.innerHTML = '';
                            gMain();
                        }else{
                            count-=200;
                            oMusic.innerHTML = '<embed src="audio/a_o.mp3" autostart="true" hidden="true"></embed>';
                            oMark.innerHTML = '成绩：'+count;
                        }
                    }

            }
            }
            getTimer();
            gMain();
            oAgain.onclick = function () {
                oEnd.style.display = "none";
                count =0;
                level = 1;
                oMark.innerHTML = '成绩：'+count;
                oInner.innerHTML = '';
                getTimer();
                gMain();
            }


        }
    </script>
</head>
<body>

<div class="wrap">
    <div class="header">
        <div id="limit_time"></div>
        <div id="mark"></div>
    </div>
    <div id="main">
        <ul id="inner">

        </ul>
    </div>
    <div id="end">
        <p id="end_mark"></p>
        <a id="again" href="###">再来一次</a>
    </div>
    <div id="BGmusic"></div>
    <div id="music"></div>
</div>
</body>
</html>